<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-refund">
			<!-- 头部 -->

			<view
				style="display: flex;justify-content: center;margin: 0 0 3vw 0;background-color: #fc8b00;height: 246rpx; padding: 20rpx;">
				<!-- <image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image> -->
				<view style=" position: relative;  width: 96vw; padding: 24rpx 2vw 5vw 2vw; " class="content">
					<view style="text-align: center;">
						<view
							style="margin-bottom: 16rpx; color: #fff; font-size: 36rpx;font-weight: bold;position: relative;display:flex;align-items:center;justify-content: center;"
							class="status-text">
							<image src="../../../static/images/default/orea.png" mode="widthFix"
								style="margin-top: 4rpx;margin-right:8px;width:24px;display:inline-block;"></image>
							{{getStateText(refundData.state)}}
						</view>

						<view class="padding-bj-sm" style="font-size: 28rpx;color: #fff;" v-if="refundData.state != 4">
							{{getStateInfo(refundData.state)}}
						</view>
					</view>
					<!-- <text
						style=" position: absolute;right: 5vw;bottom: 14vw;  font-size: 4.8vw;font-weight: bold;"><text
							class="text-price"> {{refundData.price}}</text></text> -->
					<!-- <view class="flex justify-end " style="margin-top: 6vw;">
						<button class=" margin-bj  margin-lr-xs" @tap="closeRefund(refundData.id)">关闭退款</button>
						<button class=" margin-bgg " @tap="editRefund(refundData.id)">修改申请</button>
					</view> -->
				</view>


			</view>
			<view
				style="position: relative;padding: 10rpx; top:-80rpx;margin: 0rpx 16rpx;background-color: #fff; border-radius: 12rpx;min-height: 100rpx;">
				<view class="rf-context padding-top-xs" v-if="refundData.state == 5">
					<view class="cicle-line">
					</view>
					<view class="flex">
						<view class="hair-circle">
							<view class="in"></view>
						</view>
						<text>用户已取消退款申请</text>
					</view>
					<view class="rf-tt">
						{{refundData.closingtime_text}}
					</view>
				</view>
				<view class="rf-context padding-top-xs" v-if="refundData.state == 4">
					<view class="cicle-line">
					</view>
					<view class="flex">
						<view class="hair-circle">
							<view class="in"></view>
						</view>
						<text>退款申请已审核通过，¥{{refundData.price}}已原路退回至您的支付账户，请注意查收</text>
					</view>
					<view class="rf-tt">
						{{refundData.closingtime_text}}
					</view>
				</view>
				<view class="rf-context padding-top-xs">
					<view class="flex">
						<view class="hair-circle">
							<view class="in"></view>
						</view>
						<text>用户发起退款申请</text>
					</view>
					<view class="rf-tt">
						{{refundData.createtime_text}}
					</view>
				</view>
			</view>


			<view v-if="refundData.state == 1" style="position: relative;top:-80rpx;width: 96vw;margin: 8px 8px 0;">
				<view class="bg-white solid-top padding-bj receipt" style="border-radius: 12rpx 12rpx 0 0">
					<view class="icon">
						<text class="wlIcon-guanzhu1"></text>
					</view>
					<view class="content">
						<view class="flex justify-between">
							<text>收件人：{{refundData.shopConfig.returnName}}</text><text>{{refundData.shopConfig.returnPhoneNum}}</text>
						</view>
						<view class="margin-top-xs">
							<view class="text-cut-2">
								{{refundData.shopConfig.returnAddr}}
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white padding-bj solid-top" style="border-radius: 0 0 12rpx 12rpx">
					<view class="wanl-gray text-sm">
						<view>
							<text class="wlIcon-dot margin-right-sm"></text>请勿使用平邮或到付，以免商家无法收到退货
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>请填写真实快递信息，如超时则关闭退款
						</view>
					</view>
				</view>
				<view class="cu-form-group" style="border-radius: 12rpx 12rpx 0 0;margin-top: 8px">
					<view class="title">快递单号：</view>
					<input placeholder="请填写快递单号" name="input" v-model="returnData.express_no"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">快递公司：</view>
					<!-- <picker @change="kuaidiChange" :range="refundData.kuaidi" range-key="name" indicator-class="picker-box">
						<view class="picker">
							{{kuaidiKey>-1?refundData.kuaidi[kuaidiKey].name:'请选择'}}
						</view>
					</picker> -->

					<uni-data-picker class="custom-picker" v-slot:default="{data, error, options}" popup-title="请选择快递公司"
						:localdata="refundData.kuaidi" v-model="returnData.express_name">
						<view v-if="error" class="error">
							<text>{{error}}</text>
						</view>
						<view v-else-if="data.length" class="selected">
							<view v-for="(item,index) in data" :key="index" class="selected-item">
								<text class="fs15">{{item.text}}</text>
							</view>
						</view>
						<view v-else class="flex flex-end">
							<text class="gray-font mr5 fs15">请选择快递公司</text>
							<uni-icons type="right" size="20" color="#999"></uni-icons>
						</view>
					</uni-data-picker>
				</view>
				<view class="bg-white padding-bj current" style="border-radius: 0 0 12rpx 12rpx">
					<view class="flex justify-end">
						<!-- <button class="cu-btn line-orange margin-lr-xs" style="border-radius: 900rpx;" @tap="toExpress(refundData.id)">确认退货</button> -->
						<button @tap="toExpress(refundData.id)" class="cu-btn"
							:style="{ background: '#fd8c00', color: '#fff', border: 'none', height: '60rpx', fontSize: '26rpx', borderRadius: '900rpx'}">确认退货</button>
					</view>
				</view>
			</view>
			<view class="bg-white current" v-if="refundData.state == 6">
				<view class="bg-white solid-top padding-bj">
					退货物流：<text class="wanl-gray">{{refundData.express_name}}({{refundData.express_no}})</text>
				</view>
				<view class="bg-white solid-top padding-bj current">
					<view class="wanl-gray text-sm">
						<view>
							<text class="wlIcon-dot margin-right-sm"></text>如果退款被拒绝，您可以修改申请重新发起
						</view>
						<view class="margin-top-xs">
							<text class="wlIcon-dot margin-right-sm"></text>卖家超时未处理，系统将自动确认
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white solid-top padding-bj current " v-if="refundData.state == 2">
				<view class="text-sm">
					拒绝理由：<text class="wanl-gray">{{refundData.refuse_content}}</text>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-black" @tap="arbitrationRefund(refundData.id)">平台介入</button>
					<button class="cu-btn line-orange margin-left-xs" @tap="editRefund(refundData.id)">修改申请</button>
				</view>
			</view>
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 3">
				<view class="wanl-gray text-sm">
					<view>
						<text class="wlIcon-dot margin-right-sm"></text>客服正在审核退款详情及退款历史记录
					</view>
					<view class="margin-top-xs">
						<text class="wlIcon-dot margin-right-sm"></text>大概1-3个工作日做出答复，请耐心等待
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center; position: relative;top: -60rpx;">
				<view style="width: 96vw;background-color: #fff; padding: 0 4vw; border-radius: 12rpx;">
					<view class="bg-white padding-bj flex justify-between align-center" v-if="refundData.state == 4">
						<text>退款总金额</text><text class="text-price wanl-orange">{{refundData.price}}</text>
					</view>
					<!-- <view class="bg-white padding-bj margin-top-bj flex justify-between align-center" @tap="refundLog(refundData.id)">
						<text>退款历史</text><text class="wlIcon-fanhui2"></text>
					</view> -->
					<view class="bg-white margin-tb-bj">
						商品信息
					</view>
					<view class="flex">
						<view class="cu-avatar xl margin-right-bj"
							:style="{backgroundImage: 'url('+$wanlshop.oss(refundData.goods.image, 70, 70)+')'}">
						</view>
						<view class="text-sm" style="width: calc(100% - 128rpx);">
							<view class="margin-bottom-xs">

								<view class="text-cut-2">
									<view v-if="refundData.order_type === 'groups'"
										class="cu-tag sm margin-right-xs bg-gradual-orange radius">
										<text>拼团订单</text>
									</view>
									{{refundData.goods.title}}
								</view>
							</view>
							<view class="wanl-gray">
								规格：{{refundData.goods.difference}}
							</view>
							<view class="flex justify-between">
								<view style="color: red;">
									¥ <text style="font-size: 32rpx;">{{refundData.goods.price}}</text>
								</view>
								<view style="color: #999;">
									x{{refundData.goods.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="bg-white text-sm">
						<view class="item flex margin-top-bj"
							style="justify-content: space-between; height: 32rpx; align-items: center;">
							<text> 订单编号： {{refundData.order_no}}</text>
							<text @tap="copyOrder(refundData.order_no)"
								style=" text-align:right;color: #fd8c00;border:2rpx solid #fd8c00;border-radius: 10rpx;padding: 0rpx 8rpx;margin-left: 10rpx;">复制</text>
							</text>
						</view>
						<view class="item flex margin-top-bj" style="justify-content: space-between;">
							<text> 退款类型： </text> <text class="wanl-gray"> {{refundData.type_text}} </text>
						</view>
						<view class="item flex margin-top-bj" style="justify-content: space-between;">
							<text> 退款原因： </text> <text class="wanl-gray"> {{refundData.reason_text}} </text>
						</view>
						<view class="item flex margin-top-bj" style="justify-content: space-between;">
							<text> 退款金额： </text>

							<text class="text-price wanl-gray"><text class="wanl-gray"> {{refundData.price}} </text>
							</text>
						</view>
						<view class="item flex margin-top-bj" style="justify-content: space-between;">
							<text> 物流状态： </text>

							<text class="wanl-gray"> {{refundData.expressType_text}}
							</text>
						</view>
						<view class="item flex margin-top-bj" style="justify-content: space-between;">
							<text> 退款时间： </text> <text class="wanl-gray"> {{refundData.createtime_text}} </text>
						</view>
					</view>

					<view class="kf flex justify-around">
						<view class="" @click="callPhone('13800000000')">
							<uni-icons type="phone" class="margin-right-s"></uni-icons>电话客服
						</view>
						<view class="" @tap="onUser()">
							<uni-icons type="headphones" class="margin-right-s"></uni-icons>在线客服
						</view>
					</view>
				</view>
			</view>

			<view class="edgeInsetBottom"> </view>
		</view>
		<!-- <view class="wanl-you-like"
			:style="{ backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.guess_you_like_icon) + ')' }"></view>
		<wanl-product :dataList="likeData" /> -->
	</view>
</template>

<script>
	// import {
	// 	mapState,
	// 	mapActions
	// } from 'vuex';
	export default {
		data() {
			return {
				likeData: [],
				refundData: {
					statetime: '',
					goods: {

					}
				},
				returnData: {
					id: 0,
					express_no: '',
					express_name: ''
				},
				kuaidiKey: -1
			};
		},
		// computed: {
		// 	...mapState(['common']),
		// },
		onLoad(option) {
			this.loadlikeData()
			this.loadData({
				id: option.id
			});
		},
		methods: {
			// 复制
			copyOrder(data) {
				uni.setClipboardData({
					data: data,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						})
					}
				})
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				this.$api.get({
					url: '/wanlshop/product/likes?pages=user',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? 'noMore' : 'more';
					}
				});
			},

			async loadData(data) {
				this.$api.get({
					url: '/wanlshop/refund/getRefundInfo',
					data: data,
					success: res => {
						res.kuaidi.forEach(item => {
							item.value = item.name;
							item.text = item.name;
						})
						this.refundData = res;
						this.returnData.id = res.id;
						// 时间差的毫秒数 
						if (res.state == 0) {
							var diff = (res.createtime + res.config.autoagree * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = '还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = '还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分';
							}
						} else if (res.state == 1) {
							var diff = (res.agreetime + res.config.returntime * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = '还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = '还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分';
							}
						} else if (res.state == 2) {
							this.refundData.statetime = res.rejecttime_text;
						} else if (res.state == 6) {
							var diff = (res.returntime + res.config.receivingtime * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.refundData.statetime = '还剩' + minutes + '分';
							}
							if (hours > 0) {
								this.refundData.statetime = '还剩' + hours + '天' + minutes + '分';
							}
							if (days > 0) {
								this.refundData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分';
							}
						} else if (res.state == 3) {
							this.refundData.statetime = '等待平台处理';
						} else if (res.state == 4) {
							this.refundData.statetime = res.completetime_text;
						} else if (res.state == 5) {
							this.refundData.statetime = res.closingtime_text;
						}
					}
				});
			},
			getStateText(state) {
				return ["等待卖家同意", "等待买家退货", "卖家拒绝退款", "平台介入", "退款完成", "退款关闭", "等待卖家收取退货"][state];
			},
			getStateInfo(state) {
				return ["您已成功发起退款，等待卖家同意", "您发起的退款卖家已同意，请退货", "您可以修改退货申请再次发起", "您已申请平台介入，请等待平台对此判定", "退款完成", "您已关闭本次退款申请",
					"如果商家确认收到货物，并核查没有问题，将退款给您"
				][state];
			},
			kuaidiChange(e) {
				this.kuaidiKey = e.detail.value;
				this.returnData.express_name = this.refundData.kuaidi[e.detail.value].code;
			},
			// 退款历史
			refundLog(id) {
				this.$wanlshop.to(`/pages/user/refund/log?id=${id}`);
			},
			// 平台介入
			async arbitrationRefund(id) {
				this.$api.get({
					url: '/wanlshop/refund/arbitrationRefund',
					data: {
						id: id
					},
					success: res => {
						this.loadData({
							id: id
						});
					}
				});
			},
			// 关闭退款
			async closeRefund(id) {
				this.$api.get({
					url: '/wanlshop/refund/closeRefund',
					data: {
						id: id
					},
					success: res => {
						this.$store.commit('statistics/order', {
							customer: this.$store.state.statistics.order.customer - 1
						});
						this.loadData({
							id: id
						});
					}
				});
			},
			// 提交物流
			async toExpress() {
				if (!this.returnData.express_no) {
					this.$wanlshop.msg('运单号不能为空');
					return false;
				}
				if (!this.returnData.express_name) {
					this.$wanlshop.msg('请选择快递公司');
					return false;
				}
				console.log('returnData',this.returnData)
				this.$api.post({
					url: '/wanlshop/refund/toExpress',
					data: this.returnData,
					success: res => {
						this.loadData({
							id: res
						});
					}
				});
			},
			// 修改退款
			editRefund(id) {
				this.$wanlshop.to(`/pages/user/refund/edit?id=${id}`);
			},
			// 联系客服
			onUser() {
				this.$wanlshop.to(`/pages/user/service`);
			},
			callPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			}

		}
	};
</script>

<style>
	page {
		height: 100%;
		background: #f6efe9 !important;
	}

	.margin-tb {
		margin: 1.6vw 0;
	}

	.margin-bj {
		border: 1rpx solid #11E195;
		box-sizing: border-box;
		color: #11E195;
		font-size: 2.8vw;
		font-weight: normal;
		margin: 0 1vw;
		background-color: #fff;
		border-radius: 52.53vw;
		width: 19.73vw;
		height: 7.2vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.margin-bgg {
		border: 1rpx solid #11E195;
		background-color: #11E195;
		color: white;
		font-size: 2.8vw;
		font-weight: normal;
		margin: 0 1vw;
		border-radius: 52.53vw;
		width: 19.73vw;
		height: 7.2vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.wanl-refund .header {
		width: 100%;
		height: 180rpx;
		position: relative;
		background-color: #f72b36;
	}

	.wanl-refund .header .img-bg {
		width: 100%;
		height: 180rpx;
	}

	.wanl-refund .header .content {
		width: 100%;
		height: 180rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.wanl-refund .header .status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	.wanl-refund .header .reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.wanl-refund .header .reason-text {
		padding-right: 12rpx;
	}

	.wanl-refund .header .status-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}

	.wanl-refund .current .cu-btn {
		width: 140rpx;
		font-size: 26rpx;
		padding: 0 12rpx;
	}

	.wanl-refund .receipt {
		display: flex;
		align-items: center;
	}

	.wanl-refund .receipt .icon {
		margin-right: 25rpx;
		font-weight: bold;
	}

	.wanl-refund .receipt .content {
		flex: 1;
	}

	.wanl-refund .cu-form-group .title {
		padding-right: 25rpx;
		font-size: 28rpx;
		height: 55rpx;
		line-height: 55rpx;
	}

	.wanl-refund .cu-form-group input {
		font-size: 28rpx;
		color: #555;
		padding-right: 10rpx;
	}

	.wanl-refund .rf-context {
		position: relative;
		margin: 20rpx;
		font-size: 28rpx;
	}

	.wanl-refund .rf-context .rf-tt {
		color: #666666;
		font-size: 24rpx;
		padding-left: 60rpx;
		margin-top: 10rpx;
	}

	.wanl-refund .kf {
		border-top: 2rpx solid #eeeeee;
		margin: 30rpx 0;
		padding-top: 20rpx;
		color: #666666;
	}

	.wanl-refund .rf-context .title {
		border: 1px solild red;
		display: block;
	}

	.hair-circle {
		background-color: rgb(252, 139, 0);
		background-color: rgb(240 137 11 / 45%);
		height: 40rpx;
		width: 40rpx;
		border-radius: 50%;
		text-align: center;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.hair-circle .in {
		display: inline-block;
		background-color: rgb(252, 139, 0);
		height: 20rpx;
		width: 20rpx;
		border-radius: 50%;
	}

	.cicle-line {
		position: absolute;
		top: 20rpx;
		left: 18rpx;
		height: 120rpx;
		width: 5rpx;
		background-color: rgb(252, 139, 0);
	}
</style>